<template>
	<view>
		<form @submit="setForm" @reset="">

			<view class="inputs">
				<input type="text" name='title' value="" placeholder="请输入标题" placeholder-class="oi" />
			</view>
			<view class="text">
				<textarea value="" name='text' placeholder="请描述您的问题，150字以内" placeholder-class="oi" maxlength="150" />
				<view class="shangchuan">
					
					<view class='upload-image-view'>
						<!-- 标题已经省略 -->
						<!-- <view class='title'>上传xxxx图片</view> -->
						<block v-for="(image,index) in imageList" :key="index">
							<view class='image-view'>
								<image :src="image" :data-src="image" @tap="previewImage"></image>
								<view class='del-btn' :data-index="index" @tap='deleteImage(index)'>
									<view class='baicha'></view>
								</view>
							</view>
						</block>
						<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">
							<view class="cross">
								<view class="transverse-line"></view>
								<view class="vertical-line"></view>
							</view>
				
						</view>
						<!-- <view class='info'>上传证书/证件，不超过{{imageLength}}张。(非必填)</view> -->
					</view>
				</view>
			</view>
			<view class="wenfen">
				<view class="fenuc acea-row">
					<image src="../../static/fl.png" mode=""></image>
					<view>问题分类</view>
				</view>
				<view class="waicse acea-row">
					<view :class="header==index?'active' :''" @click="act(index,val.id)" v-for="(val,index) in wentifen">#{{val.name}}</view>
					
				</view>
			</view>
			<button form-type="submit" class="submit">提交</button>
		</form>
		
	</view>
</template>

<script>
	var sourceType = [
	
		['album']
	]
	var sizeType = [

		['compressed']
	]
			import ImgUrl from '../../components/http/http.js'
	export default {
		data() {
			return {
				imageList: [], //保存图片路径集合
				imageLength: 1, //限制图片张数
				sourceTypeIndex: 2, //添加方式限制 
				sizeTypeIndex: 2, //图片尺寸限制
				header:null,
				wentifen:[],
				cid:null
			}
		},
		onLoad(){
			var that = this
			this.$api('/portal/index/twfl',{},function(res){
				console.log(res)
				that.wentifen = res.data.data
			})
		},
		methods: {
			act(e,id){
				this.header = e
				this.cid = id
			},
			setForm(e){
				console.log(e)
				var that = this,cid = this.cid,title= e.detail.value.title,text= e.detail.value.text
				if(title == '' || text == ''){
					uni.showToast({
						title:'完善后再提交',
						icon:'none',
						duration:1500
					})
					return false
				}
				if(cid == null){
					uni.showToast({
						title:'请选择问题分类',
						icon:'none',
						duration:1500
					})
					return false
				}
				var id = uni.getStorageSync('ids')
				console.log(id)
				var datas = {
					cid:cid,
					post_title:title,
					post_content:text,
					images:this.imageList,
					user_id:id
				}
				
				this.$api('/portal/index/tiwen',{datas:datas},function(res){
					console.log(res)
					if(res.data.code == 200){
						uni.showToast({
							title:res.data.msg,
							icon:'none',
							duration:1500
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			},
			chooseImage: async function() {
			
				var that = this
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					// #ifdef MP-WEIXIN
					sizeType: sizeType[this.sizeTypeIndex],
					// #endif
					success: (res) => {
						// console.log(res)
						uni.showLoading({
							title:'上传中'
						})
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
								url: ImgUrl.ImgUrl,
								filePath: tempFilePaths[0],
								name: 'file',
								fileType: 'image',
							 success: function(uploadFileRes) {
							 console.log(uploadFileRes);
							 var data = JSON.parse(uploadFileRes.data)
							  console.log(data);
							  uni.showToast({
							  	title:'图片上传成功',
								icon:'success',
								duration:3000
							  })
								that.imageList = that.imageList.concat(data.data.url);
							   uni.hideLoading()
							},
							fail:function(){
							  uni.hideLoading()
							}
						});
					}
				})
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			//删除图片
			deleteImage: function(e) {
				console.log(e)
				// var index = e.target.index
				// console.log(index)
				var that = this;
				var images = that.imageList;
			
				images.splice(e, 1);
				that.imageList = images;
			}
		}
	}
</script>

<style>
	@import url("./tiwen.css");
</style>
